<!--
 * @Descripttion: 
 * @version: 
 * @Author: Peanut
 * @Date: 2024-04-24 13:43:57
 * @LastEditors: Peanut
 * @LastEditTime: 2024-04-28 14:14:57
-->
<template>
  <div>
    <el-dialog
      title="查看报告"
      width="1000px"
      height="600px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <el-card shadow="always">
          <div class="checkResultBox">
            <div class="topArea">
              <el-image
                style="width: 550px; height: 250px"
                :src="'http://localhost:8080/image/' + reportDetails.imgUrl"
                :preview-src-list="newImgUrlList"
              >
                <div
                  slot="error"
                  class="image-slot"
                  style="width: 550px; height: 250px"
                >
                  <i
                    class="el-icon-picture-outline"
                    style="font-size: 50px"
                  ></i>
                </div>
              </el-image>
            </div>
            <div class="bottomArea">
              <div class="title">
                检测结果：<b>{{ reportDetails.runTime }}</b
                >ms
              </div>
              <el-divider></el-divider>
              <div class="tableBox">
                <div class="header">
                  <div>序号</div>
                  <div>类别</div>
                  <div>置信度</div>
                  <div>xmin</div>
                  <div>xmax</div>
                  <div>ymin</div>
                  <div>ymax</div>
                </div>
                <div class="t_body">
                  <div
                    class="bodyItem"
                    v-for="(item, index) in reportDetails.detail"
                    :key="index"
                  >
                    <div>{{ index }}</div>
                    <div>{{ item.type }}</div>
                    <div>{{ item.confidence_level }}</div>
                    <div>{{ item.xmin }}</div>
                    <div>{{ item.xmax }}</div>
                    <div>{{ item.ymin }}</div>
                    <div>{{ item.ymax }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleClose"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    reportId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      reportDetails: {},
      newImgUrl: "",
      newImgUrlList: [],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getDetails();
  },

  methods: {
    //此处通过上级组件传来的reportId获取检测报告详情
    getDetails() {
      axios
        .post(`http://localhost:8080/admin/preview/${this.reportId}`)
        .then((res) => {
          if (res.code == 1) {
            this.reportDetails = res.data;
            this.newImgUrlList.push(
              "http://localhost:8080/image/" + res.data.imgUrl
            );
          }
        });
    },
    //关闭弹窗的方法传给父组件
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  .checkResultBox {
    display: flex;
    // justify-content: space-between;
    flex-direction: column;
    .topArea {
      //   width: 550px;
      //   height: 250px;
      // border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      /deep/.image-slot {
        background: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .bottomArea {
      .title {
        // border: 1px solid black;
        font-size: 20px;
      }
      /deep/.el-divider--horizontal {
        margin: 15px 0;
      }
      display: flex;
      flex-direction: column;
      .tableBox {
        // width: 50%;
        height: 200px;
        .header {
          display: flex;
          margin-bottom: 5px;
          > div {
            text-align: center;
            font-weight: 700;
          }
          div:nth-child(1) {
            width: 10%;
          }
          div:nth-child(2) {
            width: 15%;
          }
          div:nth-child(3) {
            width: 15%;
          }
          div:nth-child(4) {
            width: 15%;
          }
          div:nth-child(5) {
            width: 15%;
          }
          div:nth-child(6) {
            width: 15%;
          }
          div:nth-child(7) {
            width: 15%;
          }
        }
        .t_body {
          height: 150px;
          overflow-y: auto;
          .bodyItem {
            display: flex;
            > div {
              height: 30px;
              line-height: 30px;
              text-align: center;
              border: 1px solid #ccc;
            }
            div:nth-child(1) {
              width: 10%;
            }
            div:nth-child(2) {
              width: 15%;
            }
            div:nth-child(3) {
              width: 15%;
            }
            div:nth-child(4) {
              width: 15%;
            }
            div:nth-child(5) {
              width: 15%;
            }
            div:nth-child(6) {
              width: 15%;
            }
            div:nth-child(7) {
              width: 15%;
            }
          }
        }
        .nodata {
          height: 200px;
          .el-empty {
            padding: 10px 0 0 !important;
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 4px;
}
</style>
